<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div class="orderManagement" style="">
    <uv-popup ref="deliveryPopup" mode="bottom" :safeAreaInsetBottom="false">
      <div style="border-bottom: 1px solid #EFEFEF" class="position-r bfff  f aic  jcc pb20 pt20">
        <div style="text-align: center;" class="w100 fz34">工具</div>
      </div>
      <div @click="commonButtonTap(3)" class="f pl30 pr30 pt30 pb30 aic jcsb" style="border-bottom: 1px solid #EFEFEF">
        <div class="f aic">
          <img class="p1758178217" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png" alt="">
          <div class="pl30">
            <div class="fz32 fw500">地址管理</div>
            <div class="fz28 pt10" style="color: #595757">管理发货地址、退货地址</div>
          </div>
        </div>
        <uv-icon size="36rpx" color="#B5B5B6" name="arrow-right"></uv-icon>
      </div>
      <div class="f  pl30 pr30 pt30 pb30 aic jcsb" style="border-bottom: 1px solid #EFEFEF">
        <div class="f aic">
          <img class="p1758178217" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png" alt="">
          <div class="pl30">
            <div class="fz32 fw500">订单开票</div>
            <div class="fz28 pt10" style="color: #595757">为消费者开具订单发票</div>
          </div>
        </div>
        <uv-icon size="36rpx" color="#B5B5B6" name="arrow-right"></uv-icon>
      </div>
      <div style="height: 100rpx"></div>
    </uv-popup>

    <!-- <u-lst-layOut  @on-ready="mainHeight = $event.mainHeight" :navbarOption="{ bgColor: 'rgba(255,255,255,1)', title: '订单管理' }" :color="{ statusBarHeightColor: '#fff' }"> -->
    <!-- #ifndef H5 -->
    <div class="w100 bfff" style="height: 54px"></div>
    <!-- #endif -->
    <div style="min-height: calc(46px + 80rpx);position: relative !important;z-index: 2 !important;">
      <uv-navbar leftIconSize="21px" :fixed="false" leftIconColor="#0b0b0b" :titleStyle="{fontSize: '16px', lineHeight: '30px'}" autoBack bgColor="#fff" title="订单管理">
        <template v-slot:right>
          <uv-icon @click="$refs.deliveryPopup.open()" color="#333333" size="44rpx" name="grid"></uv-icon>
        </template>
      </uv-navbar>
      <div style="height: 1px;background: #EFEFEF;width:100%"></div>
      <div class=" bfff" style="box-sizing: border-box;">
        <uv-tabs @click="tabTap" :current="current" :itemStyle="{fontSize: '32rpx', height: '80rpx'}" :customStyle="{ fontSize: '32rpx', height: '80rpx' }" :inactiveStyle="{ color: '#898989' }" :activeStyle="{ color: '#333' }" lineColor="#333" border :list="list"></uv-tabs>
      </div>
      <div style="height: 1px;background: #EFEFEF;width:100%"></div>
      <uv-sticky v-if="form.status == 6" customNavHeight="0" offset-top="0">
        <div style="height: 112rpx">
          <div style="height: 72rpx" class="f  aic bfff pt20 pb20  ">
            <div class="bfff position-r" style="min-width: calc(100vw - 70rpx);z-index: 1">
              <uv-scroll-list :indicator="false">
                <div class="p1758075555 f" :class="show ? 'p1758075555-1' : 'p1758075555-2'">
                  <div class="p1758077982" v-for="(item, index) in remarkList" :key="index">
                    <uv-tags shape="circle" :text="`修改包裹修改包裹修改包裹修改包裹修改包裹${index + 1}`" :plain="!item.checked" size="mini" :name="index" @click="checkboxClick"></uv-tags>
                  </div>
                </div>
              </uv-scroll-list>
            </div>
            <div style="width: 70rpx;" class="pl20 pr20" @click="show = !show">
              <uv-icon name="arrow-down" size="30rpx"></uv-icon>
            </div>
          </div>
          <div v-if="show" class="bfff p1758074550 pl15 pr15  pb20">
            <div class="p1758077982" v-for="(item, index) in remarkList" :key="index">
              <uv-tags shape="circle" :text="`修改包裹修改包裹修改包裹修改包裹修改包裹${index + 1}`" :plain="!item.checked" size="mini" :name="index" @click="checkboxClick"></uv-tags>
            </div>
          </div>
        </div>
      </uv-sticky>
    </div>
    <div :style="{height: form.status == 6 ? `calc(100vh - 46px - 80rpx - 112rpx)` : `calc(100vh - 46px - 80rpx)`}" style="overflow: hidden;display: flex;justify-content: space-between;flex-direction: column;">
      <div class="h100 oy" style="">
        <scroll-view style="height: 100%" scroll-anchoring :refresher-triggered="isRefreshing" :refresher-enabled="true" scroll-y scroll-top="0" @refresherrestore="onRefresherRestore" @refresherrefresh="bindrefresherrefresh" @scrolltolower="onReachBottom">
          <div class=" ">
            <div v-if="form.status == 2 && tableData.length" class="pl30 pt20 pr30 pb20 bfff" style="border-bottom: 1rpx solid #EFEFEF;text-align: right">
              <button @click="commonButtonTap(2)" class="common-button fz26 bfff" style=" overflow: inherit!important;width: 140rpx;height: 55rpx; border: 1rpx solid #C9CACA!important; ">合并发货
                <div class="p1758002607">
                  <uv-icon color="#D60012" size="20rpx" name="info-circle-fill"></uv-icon>
                </div>
              </button>
            </div>
            <div class="bfff p1758007076 mb20 pl30 pr30" v-for="(item, index) in tableData" :key="index">
              <div @click="uni.navigateTo({ url: '/pages-merchant/orderMerchantDetails?id='})">
                <u-lst-good :row="item"></u-lst-good>
              </div>
              <div class="mt20 pb20" style="text-align: right">
                <button v-if="item.status == 3" class="common-button fz26 bfff" style="width: 140rpx;height: 55rpx; border: 1rpx solid #C9CACA!important; ">修改包裹</button>
                <button v-if="item.status == 3 || item.status == 4" @click="uni.navigateTo({ url: '/pages-merchant/trackShipment?id='});" class="common-button fz26 bfff ml20" style="width: 140rpx;height: 55rpx;border: 1rpx solid #C9CACA!important; ">查看物流</button>
                <!-- 发货 -->
                <button v-if="item.status == 2 " @click="commonButtonTap(1, item)" class="common-button fz26 bD60012 ml20" style="width: 120rpx;height: 55rpx;color: #fff; border: 1rpx solid #D60012!important; ">发货</button>
                <button v-if="item.status == 6 && (item.CCCCCC == '待商家处理' || item.CCCCCC == '待处理即将逾期')" @click="uni.navigateTo({ url: '/pages-merchant/trackShipment?id='});" class="common-button fz26 cDE0012 bfff ml20" style="height: 55rpx;border: 1rpx solid #C9CACA!important; ">驳回申请</button>
                <button v-if="item.status == 6 && (item.CCCCCC == '退货待处理')" @click="uni.navigateTo({ url: '/pages-merchant/trackShipment?id='});" class="common-button fz26 cDE0012 bfff ml20" style="height: 55rpx;border: 1rpx solid #C9CACA!important; ">平台介入</button>
                <button v-if="item.status == 6 && (item.CCCCCC == '已售后')" @click="uni.navigateTo({ url: '/pages-merchant/trackShipment?id='});" class="common-button fz26 cDE0012 bfff ml20" style="height: 55rpx;border: 1rpx solid #C9CACA!important; ">售后申诉</button>
                <button v-if="item.status == 6 && item.BBBBBB == 2" @click="uni.navigateTo({ url: '/pages-merchant/trackShipment?id='});" class="common-button fz26 cDE0012 bfff ml20" style="height: 55rpx;border: 1rpx solid #C9CACA!important; ">同意拒收后退款</button>
                <button v-if="item.status == 6" @click="uni.navigateTo({ url: '/pages-merchant/shipment?id='});" class="common-button fz26 bD60012 ml20" style="height: 55rpx;color: #fff; border: 1rpx solid #D60012!important; ">{{ item.AAAAAA == 1 ? '同意退款' : '同意退货退款'}}</button>
                <!-- <button v-if="item.status == 6 && row.AAAAAA != 1" @click="uni.navigateTo({ url: '/pages-merchant/shipment?id='});" class="common-button fz26 bD60012 ml20" style="height: 55rpx;color: #fff; border: 1rpx solid #D60012!important; ">同意退货退款</button> -->
              </div>

            </div>
            <div class="common-empty" v-if="tableData.length === 0 && isOnce">
              <uv-empty mode="data" />
            </div>
            <div v-if="tableData.length" class="pb20">
              <uv-load-more fontSize="28rpx" :status="status" />
            </div>
          </div>
        </scroll-view>
      </div>
      <uv-safe-bottom></uv-safe-bottom>
    </div>

    <uv-overlay :z-index="1" :opacity="0.3" :show="show" @click="show = false"></uv-overlay>
  </div>
</template>
<script>
import myLayOutVue from "./components/layOut.vue";
import goodVue from "./components/good.vue";
import pageMixin from "./mixin/page.js";
import commonMixin from "./mixin/common.js";
import { orderList } from "@/api/merchant.js";
export default {
  components: {
    "u-lst-layOut": myLayOutVue,
    "u-lst-good": goodVue,
  },
  mixins: [commonMixin, pageMixin],

  data() {
    return {
      mainHeight: '',
      show: false,
      remarkCurrent: 0,
      checkboxValue: [],
      form: {
        page: 1,
        limit: 10,
        status: 1
      },
      current: 0,
      pageForm: {},
      routeQuery: {},
      list: [
        { name: "待付款", status: 1, badge: { value: 0, } },
        { name: "待发货", status: 2, badge: { value: 0, } },
        { name: "待收货", status: 3, badge: { value: 0, } },
        { name: "待评价", status: 4, badge: { value: 0, } },
        { name: "已完成", status: 7, badge: { value: 0, } },
        { name: "退款售后", status: 6, badge: { value: 0, } },
      ],
      remarkList: [{ name: '待商家处', badge: { value: 1, } }, { name: '待举证即将逾', }, { name: '待商家处1' }]
    };

  },
  onShow() {
    uni.removeStorage({ key: 'storageForm' });
  },

  onLoad(options) {
    uni.removeStorage({ key: 'storageForm' });
    if (options) this.routeQuery = options
    if (this.routeQuery.status) {
      this.list.forEach((item, index) => {
        if (this.routeQuery.status == item.status) {
          this.current = index
          this.$set(this.form, 'status', item.status);
        }
      })
    }
    this.initPage()
  },
  methods: {
    // 3-地址管理 2-合并发货 1-发货
    commonButtonTap(type, item) {
      uni.removeStorage({ key: 'storageForm' });
      if (type == 2) {
        uni.navigateTo({ url: '/pages-merchant/combinedShipping' })
        return
      }
      if (type == 3) {
        uni.navigateTo({ url: '/pages-merchant/address/management' })
        return
      }
      let { id, order_no, merchant_order_id, product_name, spec_values, price, product_image, cart_num, merchant_order, status } = item
      let obj = { id, order_no, merchant_order_id, product_name, spec_values, price, product_image, cart_num, merchant_order, status }
      if (type == 1) {
        uni.setStorage({ key: 'storageForm', data: JSON.stringify(obj) });
        uni.navigateTo({ url: '/pages-merchant/shipment?id=' + item.id });
      }
    },
    checkboxClick(name) {
      this.remarkList[name].checked = !this.remarkList[name].checked
    },
    tabTap(value) {
      this.current = value.index
      this.show = false
      this.current_page = 0;
      this.$set(this.form, 'page', 1);
      if (Object.keys(this.form).includes('status')) {
        this.$set(this.form, 'status', value.status);
      }
      this.$nextTick(() => {
        this.initPage(() => {
          this.tableData = [];
        });
      });
    },

    downTap(url) {
      this.$refs.remarkPopup.open()
    },
    layOutChange(value) {
      this.pageForm = value
    },

    initPage(cb = () => { }) {
      this.isOnce = false;
      if (this.form.page == this.current_page) return;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      let form = JSON.parse(JSON.stringify(this.form));
      orderList(form).then((res) => {
        this.isRefreshing = false;
        this.isOnce = true;

        if (res.code === 200) {
          cb();
          uni.hideLoading();
          let data = []
          if (res?.result?.data) {
            data = res.result.data.map(i => {

              //                          <!-- status
              // integer 
              // 必需
              // 订单状态：1=待支付，2=待发货，3=待收货，4=待评价，5=已取消，6=已售后，7=已完成 -->
              i.status = this.form.status
              return i
            })
          }
          this.total = res.result.total;
          this.current_page = res.result.current_page;
          this.tableData = this.tableData.concat(data);
          if (this.total <= this.tableData.length) this.status = "nomore";
        }
      })
        .catch(() => {
          uni.hideLoading();
          this.isRefreshing = false;
          this.isOnce = true;
        });
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8f8;
  color: #333333;
  font-size: 28rpx;
}
::v-deep .orderManagement #header {
  position: relative !important;
  z-index: 2 !important;
}
</style><style lang="scss" scoped>
@import "./common.scss";
.p1757991587 {
  ::v-deep .uv-tabs__wrapper__nav__item {
    position: relative !important;
  }
  ::v-deep .uv-tabs__wrapper__nav__item__text {
    width: 100% !important;
    text-align: center !important;
    font-size: 32rpx !important;
  }
  ::v-deep .uv-tabs__wrapper__nav__line {
    flex: none !important;
    width: 90rpx !important;
    margin-left: -25rpx !important;
    // transform: translateX(100%) !important;
  }
  ::v-deep .uv-badge--error {
    position: absolute !important;
    right: 0 !important;
  }
}

.p1757296779 {
  position: relative;
  z-index: 2;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.p1757298517 {
  background: #e60012;
  width: 90rpx;
  height: 50rpx;
  border-radius: 24rpx 24rpx 24rpx 24rpx !important;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  margin-right: 10rpx !important;
}

.p1757302241 {
  background: #ffffff;
  border-radius: 15rpx;
  box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.common-button {
  position: relative;
  .p1758002607 {
    position: absolute;
    top: -8rpx;
    right: -8rpx;
  }
}
.p1758075555 {
  .p1758075479 {
    height: 60rpx !important;
    color: #595757;
    white-space: nowrap;
    background: #f7f8f8 !important;
  }
}
.p1758075555,
.p1758074550 {
  display: flex;
  flex-wrap: wrap;
  .p1758077982 {
    ::v-deep .uv-tags {
      height: 60rpx !important;
      padding-left: 20rpx !important;
      padding-right: 20rpx !important;
      overflow: hidden !important;
    }
    ::v-deep .uv-tags__text {
      font-size: 28rpx !important;
      text-align: center !important;
      width: 100% !important;
    }
    ::v-deep .uv-tags__text {
      white-space: nowrap !important;
    }
    ::v-deep .uv-tags--primary--plain {
      background-color: #f7f8f8 !important;
      border-color: #f7f8f8 !important;
      .uv-tags__text {
        color: #595757 !important;
      }
    }
    ::v-deep .uv-tags--primary {
      background-color: #fef2f3 !important;
      border-color: #ffd4d7 !important;
      .uv-tags__text {
        color: #de0012 !important;
      }
    }
  }
}
.p1758074550 {
  .p1758077982 {
    width: calc(50% - 30rpx) !important;
    min-width: calc(50% - 30rpx) !important;
    margin: 10rpx 15rpx 10rpx 15rpx !important;
  }
}
.p1758075555 {
  flex-wrap: nowrap;
  .p1758077982 {
    margin: 0 5rpx 0 5rpx !important;
  }
  .p1758077982:first-child {
    margin-left: 30rpx !important;
  }
}
::v-deep .p1758007076 {
  .orderManagement-hidden {
    display: none !important;
  }
}
.orderManagement {
  ::v-deep #header {
    position: relative !important;
    z-index: 2 !important;
  }
}
::v-deep .p1758074550 {
  position: absolute;
  z-index: 3 !important;
}

::v-deep .uv-scroll-list {
  padding-bottom: 0 !important;
}
@keyframes translateY {
  from {
    transform: translateY(-52rpx);
  }
  to {
    transform: translateY(-40rpx);
  }
}
@keyframes translateY1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(112rpx);
  }
}
@keyframes translateY2 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.p1758074550 {
  animation: translateY 0.4s ease forwards;
}
.p1758075555-1 {
  transform: translateY(0);
  animation: translateY1 0.4s ease forwards;
}
.p1758075555-2 {
  transform: translateY(0);
  animation: translateY2 0.4s ease forwards;
}
.p1758178217 {
  width: 71rpx;
  height: 71rpx;
}
</style>
